<template>
    <fieldset>
        <legend>自定义指令</legend>
        <input type="text" v-focus="">
    </fieldset>
</template>
<script>
    export default {
        directives: {     // 注册
            'focus':{     // 获取焦点
                created(el,binding,vnode){         //在绑定元素的 attribute 或事件监听器被应用之前调用     初始化执行
                    console.log(el,binding,vnode);
                },       
                beforeMount(el,binding,vnode){     //当指令第一次绑定到元素并且在挂载父组件之前调用。    初始化执行
                    console.log(el,binding,vnode);
                },       
                mounted(el,binding,vnode){         //在绑定元素的父组件被挂载后调用。              初始化执行
                    console.log(el,binding,vnode);
                    el.focus()
                },       
                beforeUpdate(el,binding,vnode){    //在更新包含组件的 VNode 之前调用。            更新的时候
                    console.log(el,binding,vnode);
                },        
                updated(el,binding,vnode){         //在包含组件的 VNode 及其子组件的 VNode 更新后调用。      更新的时候
                    console.log(el,binding,vnode);
                },           
                beforeUnmount(el,binding,vnode){    //在卸载绑定元素的父组件之前调用                    卸载的时候
                    console.log(el,binding,vnode);
                },      
                unmounted(el,binding,vnode){       //当指令与元素解除绑定且父组件已卸载时，只调用一次。    卸载的时候
                    console.log(el,binding,vnode);
                },          
            }
        }
    }
</script>